<template>
  <div>
    <el-row>
      <el-col :span="7"
        ><div class="box title">{{ arrdata[0] }}</div>
        <div class="box" v-if="arrdata[0]">
          <caileidata v-bind:mydata1="arrdata[0]"></caileidata>
        </div>
      </el-col>
      <el-col :span="7"
        ><div class="box title">{{ arrdata[1] }}</div>
        <div class="box" v-if="arrdata[1]">
          <caileidata v-bind:mydata1="arrdata[1]"></caileidata></div
      ></el-col>
      <el-col :span="7"
        ><div class="box title">{{ arrdata[2] }}</div>
        <div class="box" v-if="arrdata[2]">
          <caileidata v-bind:mydata1="arrdata[2]"></caileidata></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import caileidata from "./caileidata.vue";
export default {
  data() {
    return {
      arrdata: [],
    };
  },
  components: { caileidata },
  methods: {
    datachange(res) {
      var arr = [];
      res.data.forEach((el) => {
        arr.push(el.dishes);
      });
      this.arrdata = arr;
    },
  },
  props: {
    mydata: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.$axios({
      url: "http://localhost:8081/zhh/caipudata",
      params: {
        title: this.mydata,
      },
    }).then((res) => {
      this.datachange(res);
     
    });
  },
};
</script>

<style scoped>
.box {
  
  margin-left: 180px;
}
.title {
  margin-top: 80px;
  font-size: 20px;
}
</style>